import { Link } from 'umi';
import { Menu, Layout, Breadcrumb } from 'antd';
import {
  MailOutlined,
  AppstoreOutlined,
  SettingOutlined,
} from '@ant-design/icons';

const { Header, Footer, Sider, Content } = Layout;

export default function BasicLayout({ children }) {
  function handleClick() {}

  return (
    <Layout className="layout">
      <Header>
        <div className="logo" />
        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
          <Menu.Item key="1">
            {/* {' '} */}
            <Link to="/">To Index</Link>
          </Menu.Item>
          <Menu.Item key="2">
            {' '}
            <Link to="/employee">To List</Link>
          </Menu.Item>
          <Menu.Item key="3">
            {' '}
            <Link to="/employee/:id">To Employee</Link>
          </Menu.Item>
        </Menu>
      </Header>
      <Content style={{ padding: '0 50px' }}>
        {/* <Breadcrumb style={{ margin: '16px 0' }}>
          <Breadcrumb.Item>Home</Breadcrumb.Item>
          <Breadcrumb.Item>List</Breadcrumb.Item>
          <Breadcrumb.Item>App</Breadcrumb.Item>
        </Breadcrumb> */}
        <div className="site-layout-content">{children}</div>
      </Content>
      <Footer style={{ textAlign: 'center' }}>
        Ant Design ©2018 Created by Ant UED
      </Footer>
    </Layout>
    // mountNode,
  );
}
